<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="end">
          <el-button type="primary" plain @click="addRoles">新增员工</el-button>
        </el-row>
        <el-divider />
        <!-- 下面表格 -->
        <el-table :data="tableData" style="width: 100%" border="">
          <el-table-column prop="username" label="姓名" align="center" />
          <el-table-column prop="email" label="邮箱" align="center" />
          <el-table-column label="操作" align="center" width="250">
            <template v-slot="{row}">
              <el-button type="warning" plain size="small" @click="RoleFn(row.id)">设置角色</el-button>
              <el-button type="primary" plain size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" plain size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <!-- 分页 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            background=""
            layout="prev, pager, next"
            :total="total"
            :page-size="limit"
            @current-change="pageChange"
          />
        </el-row>
      </el-card>
      <!-- 弹框  动态绑定show -->
      <dialogVisible
        ref="xiansi"
        :dialog-visible.sync="dialogVisible"
        :show="show"
      />

      <!-- 角色配置 -->
      <AssignRole ref="getRoles" :show-dialog.sync="showDialog" />
    </div>
  </div>
</template>

<script>
import dialogVisible from '@/views/employee/components/showDialog.vue'
import AssignRole from '@/views/employee/components/assign-role.vue'
import { GetEmployees, GetEmployeesList, getroles, delEmployees } from '@/api/employees'
export default {
  components: {
    dialogVisible,
    AssignRole
  },
  data() {
    return {
      // 框默认关闭
      dialogVisible: false,
      // 角色弹窗
      showDialog: false,
      tableData: [],
      total: 0,
      limit: 5, // 每一页的条数
      start: 0, // 下标
      show: true // 默认show为true
    }
  },
  created() {
    this.GetEmployeesList()
  },
  methods: {
    // 渲染
    async GetEmployeesList() {
      const res = await GetEmployees({
        _limit: this.limit,
        _start: this.start
      })
      // console.log(34, res)
      // 渲染到页面
      this.tableData = res.data
      // 分页
      const ret = await GetEmployeesList()
      // console.log(68, ret);
      this.total = ret.data
    },
    // 点击改变页码
    pageChange(el) {
      this.start = (el - 1) * this.limit
      // 刷新页面
      this.GetEmployeesList()
    },
    // 新增
    addRoles() {
      this.dialogVisible = true
      this.show = true // 点击新增是显示
    },
    // 编辑回显
    // 通过ref把data传过去form
    async editFn(id) {
      this.dialogVisible = true
      this.show = false // 点击编辑时隐藏
      const res = await getroles(id)
      // console.log(95, res)
      this.$refs.xiansi.form.id = res.data.id
      this.$refs.xiansi.form = res.data
    },
    // 删除
    delFn(id) {
      this.$confirm('确定删除此员工吗?', '提示', {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(async() => {
        await delEmployees(id)
        if (this.tableData.length === 1 && this.start >= this.limit) {
          this.start -= this.limit
        }
        // 刷新页面
        this.GetEmployeesList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 分配角色
    RoleFn(id) {
      this.showDialog = true
      this.$refs.getRoles.getRolesById(id)
    }

  }
}
</script>

<style>
</style>
